<script>
import { reactive, ref } from "@vue/reactivity";
import { useRouter } from "vue-router";
import { getServiceData } from "../api/serving";
import { public_status } from "../store/public_status";
import { useStore } from "../store/index";
import { nextTick } from "@vue/runtime-core";
export default {
  setup() {
    let data = reactive({
      question: "",
      toanswer: "",

      // 客服专业回答数组
      list: [
        {
          ask: "物流查询",
          answer: "包裹已揽件， 预计两天后到达",
        },
        {
          ask: "邮费查询",
          answer: "所有商品都是包邮的，并且赠送运费险哦！",
        },
        {
          ask: "催促发货",
          answer: "已催促发货，包裹正在使用洪荒之力奔向您，请耐心等待。",
        },
        {
          ask: "申请退款",
          answer: "请说明退款原因。",
        },
      ],
      contentlist: [
        {
          content: "你好，客服Cindy为你服务",
          myself: false,
        },
      ],
    });

    public_status().display = false;

    let talkbox = ref();

    let router = useRouter();

    // # 用户数据
    let userId = localStorage.getItem("P4_userId");
    let userData = useStore().userData[userId];

    // # 聊天窗口滚轮滚动
    function scrollToBottom(i) {
      nextTick(() => {
        talkbox.value.scrollTop += 76 * i;
      });
    }

    let submit = () => {
      // 问题推进数组
      data.contentlist.push({
        content: data.question,
        myself: true,
      });
      // 答案推进数组

      getServiceData({ key: "free", appid: 0, msg: data.question }).then(
        (value) => {
          data.toanswer = value.content;
          console.log(data.toanswer);
          data.contentlist.push({
            content: data.toanswer,
            myself: false,
          });
          scrollToBottom(1);
        }
      );
      // 输入框清空
      data.question = "";

      scrollToBottom(1);
    };

    let toask = (ask, i) => {
      data.contentlist.push(
        {
          content: ask,
          myself: true,
        },
        {
          content: data.list[i].answer,
          myself: false,
        }
      );
      scrollToBottom(2);
    };

    return {
      data,
      router,
      talkbox,
      userData,

      submit,
      toask,
    };
  },
};
</script>

<template>
  <div class="serviceView">
    <!-- 头部 -->
    <header class="header">
      <div class="back" @click="router.back()">
        <i class="iconfont icon-arrow-left"></i>
      </div>
      <div class="title">Customer Service</div>
    </header>
    <!-- 头部 -->

    <!-- 谈话框 -->
    <ul class="talkbox" ref="talkbox">
      <li v-for="(item, index) in data.contentlist" :key="index">
        <div :class="item.myself ? 'right' : 'left'">
          <div class="img">
            <img
              :src="
                item.myself
                  ? userData.imgUrl
                  : require('../assets/imgs/kefu.png')
              "
              alt=""
            />
          </div>
          <div :class="item.myself ? 'rightcontent' : 'leftcontent'">
            {{ item.content }}
          </div>
        </div>
      </li>
    </ul>

    <!-- 选择要询问的问题 -->
    <div class="inp">
      <div class="top">
        <ul class="seclect">
          <li
            v-for="(item, index) in data.list"
            :key="index"
            @click="toask(item.ask, index)"
          >
            {{ item.ask }}
          </li>
        </ul>
      </div>

      <!-- 输入内容 -->
      <div class="bottom">
        <input
          type="text"
          placeholder="请输入您要咨询的内容"
          v-model="data.question"
          @keyup.enter="submit"
        />
        <!-- 提交按钮 -->
        <div class="submit" @click="submit">
          <img src="../assets/imgs/启动.svg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.serviceView {
  min-height: 100vh;
  background-color: #efefef;

  > header.header {
    height: 56px;
    line-height: 56px;
    text-align: center;

    background: #fff;

    position: sticky;
    top: 0;
    z-index: 10;

    > .back {
      position: absolute;
      left: 15px;
      top: 0;
      bottom: 0;
      margin: auto;

      width: 37px;
      height: 37px;
      line-height: 37px;
      border-radius: 50%;
      background: #f9f9f9;

      > i {
        text-align: center;
      }
    }

    > .title {
      font-size: 18px;
      font-weight: bold;
    }

    > .btn {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 15px;
      margin: auto;

      padding: 0 15px;
      height: 32px;
      line-height: 32px;
      text-align: center;

      border-radius: 15px;
      background: #f9f9f9;
    }
  }

  > .talkbox {
    padding: 15px 15px 90px;
    height: 75vh;
    overflow-y: scroll;

    // &::-webkit-scrollbar {
    //   display: none;
    // }

    > li {
      .left {
        display: flex;
      }

      .right {
        display: flex;
        flex-direction: row-reverse;
      }

      .img {
        img {
          width: 34px;
          height: 34px;
          border-radius: 5px;
        }
      }

      .leftcontent {
        margin-left: 10px;
        background-color: #fff;
        padding: 10px 15px;
        line-height: 26px;
        color: #777777;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        margin-bottom: 20px;
        font-weight: 600;
      }
      .rightcontent {
        margin-right: 10px;
        background-color: #333;
        padding: 10px 15px;
        line-height: 26px;
        color: #fff;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        margin-bottom: 20px;
        font-weight: 600;
      }
    }
    > .usertalk {
      display: flex;
      justify-content: end;

      > .img {
        img {
          width: 34px;
          height: 34px;
          border-radius: 5px;
        }
      }
      > .content {
        margin-right: 10px;
        background-color: #186cfe;
        padding: 10px 15px;
        line-height: 26px;
        color: #fff;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        margin-bottom: 20px;
        font-weight: 600;
      }
    }
  }

  > .inp {
    background-color: #fff;
    position: fixed;
    width: 100%;
    bottom: 0px;
    left: 0px;
    .top {
      .seclect {
        margin-top: 10px;
        display: flex;
        height: 30px;
        padding: 0 15px;

        justify-content: space-between;

        li {
          height: 20px;
          line-height: 20px;
          font-size: 11px;
          color: #484848;
          border: 2px solid #e2e2e2;
          border-radius: 10px;
          padding: 0 6px;
        }
      }
    }

    .bottom {
      height: 40px;
      padding: 10px 15px;

      align-items: center;
      display: flex;
      input {
        width: 79%;
        height: 40px;
        border: 1px solid #8a8a8a;
        border-top: 2px solid #8a8a8a;
        margin: 0 20px 0 10px;
        border-radius: 10px;
        text-indent: 16px;
        background-color: #fbfbfb;
        font-weight: 600;
        color: #777777;
        font-size: 15px;
      }
      .submit {
        img {
          width: 30px;
          height: 25px;
        }
      }
    }
  }

  // 输入框文字
  input::-webkit-input-placeholder {
    color: #a6a4a4;
    font-size: 14px;
    font-weight: 600;
  }
}
</style>